<template>
  <div class="areaSale-container">
    <chart-title title="地区营销额统计" />
    <div
      class="chart-container"
      style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
    >
      <div class="filter-container">
        <el-select
          v-model="time"
          size="mini"
          style="width:100px;"
        >
          <el-option
            v-for="(item,index) in timeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        id="areaSaleChart"
        style="width:100%;height:100%;min-height:200px;"
      />
    </div>
  </div>
</template>
<script>
import {inject, onMounted, reactive, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import ChartTitle from './chartTitle.vue'
import 'echarts/map/js/china.js'

export default {
  components: {
    ChartTitle,
  },
  setup(props, context) {
    const api = inject('api')
    var reactiveData = reactive({
      time: 1,
      timeOption: [
        { label: '近7天', value: 1 },
        { label: '近30天', value: 2 },
        { label: '近6个月', value: 3 },
      ],
      option: {
        tooltip: {
          triggerOn: 'mousemove', // mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: '#999',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          formatter: function(e, t, n) {
            const data = e.data
            // // 模拟数据
            // data.specialImportant = (Math.random() * 1000) | 0
            // data.import = (Math.random() * 1000) | 0
            // data.compare = (Math.random() * 1000) | 0
            // data.common = (Math.random() * 1000) | 0
            // data.specail = (Math.random() * 1000) | 0

            const context = `
               <div>
                   <p class="tooltip_style"><span class="tooltip_left">总营销额：</span><span class="tooltip_right">${data.value}</span></p>
               </div>
            `
            return context
          },
        },

        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode: 'single',
            roam: false,
            zoom: 1.4,
            label: {
              normal: {
                show: true,
                fontSize: '12',
                color: '#666',
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                name: '南海诸岛',
                value: 100,
                eventTotal: 100,
                specialImportant: 10,
                import: 10,
                compare: 10,
                common: 40,
                specail: 20,
              },
              {
                name: '北京',
                value: 0,
              },
              {
                name: '天津',
                value: 130,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '上海',
                value: 0,
              },
              {
                name: '重庆',
                value: 0,
              },
              {
                name: '河北',
                value: 0,
              },
              {
                name: '河南',
                value: 830,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '云南',
                value: 0,
              },
              {
                name: '辽宁',
                value: 0,
              },
              {
                name: '黑龙江',
                value: 6000,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '湖南',
                value: 6000,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '安徽',
                value: 0,
              },
              {
                name: '山东',
                value: 0,
              },
              {
                name: '新疆',
                value: 0,
              },
              {
                name: '江苏',
                value: 0,
              },
              {
                name: '浙江',
                value: 0,
              },
              {
                name: '江西',
                value: 0,
              },
              {
                name: '湖北',
                value: 0,
              },
              {
                name: '广西',
                value: 0,
              },
              {
                name: '甘肃',
                value: 0,
              },
              {
                name: '山西',
                value: 0,
              },
              {
                name: '内蒙古',
                value: 778,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '陕西',
                value: 0,
              },
              {
                name: '吉林',
                value: 0,
              },
              {
                name: '福建',
                value: 0,
              },
              {
                name: '贵州',
                value: 0,
              },
              {
                name: '广东',
                value: 0,
              },
              {
                name: '青海',
                value: 0,
              },
              {
                name: '西藏',
                value: 1000000,
                label: {
                  color: '#fff',
                },
              },
              {
                name: '四川',
                value: 0,
              },
              {
                name: '宁夏',
                value: 0,
              },
              {
                name: '海南',
                value: 22,
              },
              {
                name: '台湾',
                value: 3,
              },
              {
                name: '香港',
                value: 0,
              },
              {
                name: '澳门',
                value: 0,
              },
            ],
          },
        ],
        visualMap: {
          // 地图图例
          show: true,
          left: 0,
          bottom: 0,
          showLabel: true,
          pieces: [
            // 根据数据大小，各省显示不同颜色
            {
              gte: 100000,
              label: '>= 100000',
              color: '#FF9623',
            },
            {
              gte: 100000,
              lt: 50000,
              label: '50000 - 100000',
              color: '#2D60C4',
            },
            {
              gte: 1000,
              lt: 50000,
              label: '1000 - 50000',
              color: '#518CFF',
            },
            {
              gte: 1,
              lt: 1000,
              label: '1 < 1000',
              color: '#A0BFFC',
            },
            {
              lt: 0,
              label: '0',
              color: '#eee',
            },
          ],
        },
      },
    })
    const getMap = (myChart) => {
      myChart.showLoading()
      api.dashboard.GET_MAP_DATA().then((res) => {
        myChart.hideLoading()
        echarts.registerMap('HK', res)
        // 绘制图表
        myChart.setOption((reactiveData.option = {}))
      })
    }
    const initEchartMap = () => {
      var chartDom = document.getElementById('areaSaleChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      // 绘制图表
      myChart.setOption(reactiveData.option)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    onMounted(() => {
      initEchartMap()
    })
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.areaSale-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 6666;
    }
  }
}
</style>
